<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="./vue.js"></script>
</head>
<body>
<div id="root">
  <input type="text" style="width: 600px" v-model="strCom">
  <hr/>
  <button @click="num+=100">{{num}}</button>
  <hr/>
  <input type="text" style="width: 500px;" :value="str">
  <hr/>
  <p>{{str.split("").reverse().join("")}}</p>
  <hr/>
  <p>{{fnStr()}}</p>
  <hr/>
  <p>{{str | strFilter}}</p>
  <hr/>
  <p>{{strCom}}</p>
</div>
</body>
<script>
  const vm = new Vue({
    el: "#root",
    data:{
      num:100,
      str:"过不了多久，我就开始写联合项目啦！"
    },
    methods:{
      fnStr(){
        console.log("fnStr");
        return this.str.split("").reverse().join("");
      }
    },
    filters:{
      strFilter(v){
          return v.split("").reverse().join("");
      }
    },
    computed:{
      strCom:{
        get(){
          return  this.str.split("").reverse().join("");
        },
        set(v){
          // console.log("set",v)
          // this.str = v;
          this.str = v.split("").reverse().join("");
        }
      }
    }

  })
</script>
</html>